<style>
  .layui-badge-rim {
    height: 20px;
    border-width: 1px;
    border-style: solid;
    background-color: #eef4f5;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    color: #6e667d;
  }
  .import {
    opacity: 0;
    position: absolute;
    width: 69px;
    height: 38px;
    margin-left: -10px;
  }
</style>

<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">名称：</label>
                  <div class="layui-input-inline">
                    <input
                      name="name"
                      id="name"
                      class="layui-input"
                      type="text"
                      placeholder="请输入名称"
                      autocomplete="off"
                    />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                    layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button
                id="uploaderInputBut"
                class="layui-btn icon-btn color-reseda"
              >
                <input
                  id="uploaderInput"
                  type="file"
                  name="file"
                  class="import"
                  accept=".xls,.xlsx"
                />导入
              </button>
              <button
                id="downTemplate"
                type="button"
                class="layui-btn icon-btn color-reseda"
              >
                下载模板
              </button>
              <button
                id="configFun"
                style="display: none"
                class="layui-btn icon-btn color-reseda"
                type="button"
              >
                确认选择
              </button>

              <button class="layui-btn" lay-filter="syncSubmit" lay-submit>同步</button>

            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="productDrawInfo"
        lay-filter="productDrawInfo"
      ></table>
    </div>
  </div>
</div>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="productDrawTableBar"></script>

<!-- js部分 -->
<script>
  layui.use(
    [
      "layer",
      "form",
      "table",
      "laydate",
      "admin",
      "laytpl",
      "tableTreeDj",
      "config",
    ],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var table = layui.table;
      var form = layui.form;
      var config = layui.config;
      var admin = layui.admin;
      let nowData = {};
      let where = {};
      if (typeof parentData !== "undefined") {
        nowData = { ...parentData };
        if (nowData.eventName == "radio" || nowData.eventName == "checkbox") {
          $("#configFun").show();
        }
        where = { ...nowData.where };
      }

      //渲染下拉
      form.render("select");

      // 渲染表格
      var insTb = table.render({
        id: "#productDrawInfo",
        elem: "#productDrawInfo",
        url: config.base + "enterprise/res/admin/proDrawPic/list",
        page: true,
        cellMinWidth: 100,
        cols: [
          [
            { type: "radio", hide: !nowData.eventName == "radio" },

            { type: "numbers", title: "序号", fixed: "center" },
            { field: "fileUrl", title: "产品图纸地址", fixed: "center" },
            {
              field: "name",
              title: "模具图纸文件",
              templet: function (d) {
                return '<span class="layui-badge-rim">' + d.name + "</span>";
              },
              event: "imgClick",
            },
            {
              field: "createTime",
              fixed: "center",
              title: "创建时间",
              width: 160,
            },
            /*     , {align: 'center', toolbar: '#productDrawTableBar', title: '操作', width: 220}*/
          ],
        ],
        done: function (res, curr, count) {
          //移除按钮
        },
      });
      $("#configFun").click(function () {
        let list = table.checkStatus("#productDrawInfo").data;
        childData.list = list;
        layer.close(nowData.zindex);
      });
      // 工具条点击事件
      table.on("tool(productDrawInfo)", function (obj) {
        var data = obj.data;
        if (obj.event === "imgClick") {
          let json = {};
          json.attachment = data.fileUrl;
          showViewAttachmentModel(json);
        }
      });

      function showViewAttachmentModel(data) {
        admin.open({
          type: 1,
          area: ["60%", "80%"],
          offset: "65px",
          title: "查看附件",
          content: $("#viewAttachmentHtml").html(),
          success: function () {
            if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
              PDFObject.embed(data.attachment, "#example1");
            } else {
              var attachmentHtml = "";
              data.attachment.split(",").forEach((attachmentUrl, index) => {
                attachmentHtml +=
                  '<div><div><img src="' + attachmentUrl + '"></div></div>';
              });
              $("#example1").html(attachmentHtml);
            }
          },
        });
      }
      // 导入excel
      $("#uploaderInput").on("change", function (e) {
        layer.load(2);
        var formData = new FormData();
        var files = e.target.files;
        let that = $(this);
        formData.append("file", files[0]);
        formData.append("name", files[0].name); //这个地方可以传递多个参数
        $.ajax({
          url: config.base + "enterprise/res/admin/proDrawPic/importExcel",
          data: formData,
          headers: { Authorization: "Bearer " + config.getToken() },
          type: "POST",
          processData: false,
          contentType: false,
          success: function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              layer.closeAll("page");
              setTimeout((_) => {
                location.reload();
              }, 1000);
            } else {
              layer.msg(res.msg, { icon: 2 });
            }
            that.val("");
          },
        });
      });


      form.on("submit(syncSubmit)", function () {
        //拿到当前
        let companyInfoId = config.getUser().companyInfoId;
        admin.req(`file/admin/newFile/syncDrawPic`,{companyInfoId:companyInfoId} , function (res) {
          layer.closeAll('loading');
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            insTb.reload(
                    { where: {}, page: { curr: 1 } },
                    "data"
            );
          } else {
            layer.msg(res.msg, {icon: 2});
          }
        }, 'POST');
        return false;
      });

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", (data) => {
        insTb.reload(
          { where: admin.resetSearch(data.field), page: { curr: 1 } },
          "data"
        );
      });
      //下载模板的点击事件
      $("#downTemplate").click(function () {
        window.location.href =
          config.base + "enterprise/res/admin/proDrawPic/template";
      });
    }
  );
</script>
